<div id="account" class="main-content">
    <div style="display:none;" th:fragment="title" th:inline="text">Register - Broadleaf Demo - Heat Clinic</div>
	
    <div id="register" class="login-wrapper" style="width: auto;">
        <span class="page-title" th:text="#{register.registerForAccount}">Register for an Account</span>
        <p><span th:text="#{register.signUpNow}">Don't have an account yet? Sign up for one now to gain access to all our member tools</span>.</p>

		<div class="social-connect" style="margin-bottom: 20px">
			<a class="facebook-connect" th:href="@{/socialauth(id='facebook')}" ><span th:text="#{connect.facebook}" >Connect with Facebook</span></a>
<!-- 			<a class="twitter-connect" th:href="@{/socialauth(id='twitter')}" ><span th:text="#{connect.twitter}">Connect with Twitter</span></a> -->
			<a class="gplus-connect" th:href="@{/socialauth(id='googleplus')}" ><span th:text="#{connect.googleplus}">Connect with Google+</span></a>
		</div>

        <blc:form id="registrationForm" action="#" th:object="${customRegisterCustomerForm}" th:action="@{/register}" method="post" class="clearfix">
            <input type="hidden" th:field="*{redirectUrl}" />
            <div class="form-fields">    
	            <div>
	            	<span class="error" th:if="${#fields.hasErrors('customer.emailAddress')}" th:errors="*{customer.emailAddress}"></span>
	                <label for="customer.emailAddress"><span th:text="#{register.email}">Email</span></label>
	                <input type="email" th:field="*{customer.emailAddress}" class="field50" th:classappend="${#fields.hasErrors('customer.emailAddress')}? 'fieldError'" />
	            </div>
	            <div>
	                <label for="customer.firstName"><span th:text="#{register.firstName}">First Name</span></label>
	                <span class="error" th:if="${#fields.hasErrors('customer.firstName')}" th:errors="*{customer.firstName}"></span>
	                <input type="text" th:field="*{customer.firstName}" class="field50" th:classappend="${#fields.hasErrors('customer.firstName')}? 'fieldError'" />
	            </div>
	            <div>
	                <label for="customer.lastName"><span th:text="#{register.lastName}">Last Name</span></label>
	                <span class="error" th:if="${#fields.hasErrors('customer.lastName')}" th:errors="*{customer.lastName}"></span>
	                <input type="text" th:field="*{customer.lastName}" class="field50" th:classappend="${#fields.hasErrors('customer.lastName')}? 'fieldError'" />
	            </div>          
	            <div>
	                <label for="password"><span th:text="#{register.password}">Password</span></label>
	                <span class="error" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></span>
	                <input type="password" th:field="*{password}" class="field50" th:classappend="${#fields.hasErrors('password')}? 'fieldError'" />
	            </div>
	            <div>
	                <label for="confirmPassword"><span th:text="#{register.confirmPassword}">Confirm Password</span></label>
	                <span class="error" th:if="${#fields.hasErrors('passwordConfirm')}" th:errors="*{passwordConfirm}"></span>
	                <input type="password" th:field="*{passwordConfirm}" class="field50" th:classappend="${#fields.hasErrors('passwordConfirm')}? 'fieldError'" />
	            </div>
	            
	            <div>
		            <label for="recaptcha_response_field">&nbsp;</label>
		            <span class="error" th:if="${#fields.hasErrors('captchaForm.recaptcha_response_field')}" th:errors="*{captchaForm.recaptcha_response_field}"></span>
		            <div style="display: inline-block;"><div th:substituteby="layout/partials/recaptcha" /></div>
		        </div>
	                      
            </div>
            <div class="login_register">
                <input class="register_button big red" type="submit" th:value="#{register.register}"/>
            </div>
            
            <div class="login_register_alt_links">
                <a class="account" th:href="@{/login}"><span th:text="#{register.login}">Login</span></a>
                <br/>
                <a class="account" th:href="@{/forgotPassword}"><span th:text="#{register.forgotPassword}">Forgot Password</span></a>
            </div>
        </blc:form>
        <div class="clear"/>
    </div>  
</div>
